<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="shortcut icon" type="image/x-icon" href="../img/favicon.ico">
    <!-- Place favicon.ico in the root directory -->

    <!-- CSS here -->
    <link rel="stylesheet" href="../css/meanmenu.css">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/responsive.css">
</head>

<body>


        <!-- Header -->
        <header class="header">
            <div class="top header__top gray-bg d-none d-md-block">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-xl-6 col-lg-5">
                            <div class="message--header__top">
                                <p class="message m-0 dove__gray-color">全国免费送货-所有订单金额超过$ 1000</p>
                            </div>
                        </div>
                        <div class="col-xl-6 col-lg-7">
                            <div class="menu--header__top text-right">
                                <nav class="nav--top__list">
                                    <ul class="list-inline">
                                        <li><a class="nav--top__link dove__gray-color text-capitalize position-relative" href="#">登录</a></li>
                                        <li><a class="nav--top__link dove__gray-color text-capitalize position-relative" href="#">注册</a></li>
                                        <li><a class="nav--top__link dove__gray-color text-capitalize position-relative" href="#">购物车</a></li>
                                        <li class="nav--top__dropdown position-relative"><a class="nav--top__link lang--top__link dove__gray-color text-capitalize position-relative" href="#">统计图表<span class="lnr lnr-chevron-down"></span></a>
                                            <ul class="dropdown-show">
                                                <li><a class="dove__gray-color text-capitalize" href="#"><span class="lang">饼图</span><span class="currency">USD</span></a></li>
                                                <li><a class="dove__gray-color text-capitalize" href="#"><span class="lang">柱状图</span><span class="currency">TAKA</span></a></li>
                                            </ul>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="middle header__middle bg--header__middle header-middle-three pt-35 pb-35">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="content--header__middle d-flex align-items-center justify-content-between">
                               <div class="header-search-three d-none d-md-block">
                                   <form>
                                       <input id="searchName" value="${searchName}" type="text" placeholder="请输入您想要查询的产品..."  name="searchName">
                                       <button type="button" onclick="search_product()"><i class="icofont-search-2"></i></button>
                                   </form>
                               </div>
                                <div class="logo--header__middle">
                                    <div class="logo">
                                        <a class="logo__link" href="index.jsp"><img src="../img/logo/h1__logo.png" alt=""></a>
                                    </div>
                                </div>
                                <div class="cart--header__middle cart--header__three">
                                    <div class="cart--header__list">
                                        <ul class="list-inline">
                                            <li><a href="#"><i class="fal fa-user-plus"></i></a></li>
                                            <li><a href="#"><i class="fal fa-heart"></i></a></li>
                                            <li><a class="mini__cart--link" href="#"><i class="fal fa-bags-shopping"><span class="cart__count">3</span></i><span class="cart__amount">$ 3550</span></a></li>
                                        </ul>
                                    </div>
                                    <div class="mini__cart--box">
                                        <ul>
                                            <li class="mb-20">
                                                <div class="cart-image">
                                                    <a href="#"><img src="../img/allproducts/cart__thumb__1.jpg" alt=""></a>
                                                </div>
                                                <div class="cart-text">
                                                    <a href="#" class="title f-400 cod__black-color">花盆</a>
                                                    <span class="cart-price f-400 dusty__gray-color">2 x <span class="price f-800 cod__black-color">$ 78.00</span></span>
                                                </div>
                                                <div class="del-button">
                                                    <a href="#"><i class="icofont-close-line"></i></a>
                                                </div>
                                            </li>
                                            <li class="mb-20">
                                                <div class="cart-image">
                                                    <a href="#"><img src="../img/allproducts/cart__thumb__2.jpg" alt=""></a>
                                                </div>
                                                <div class="cart-text">
                                                    <a href="#" class="title f-400 cod__black-color">地毯</a>
                                                    <span class="cart-price f-400 dusty__gray-color">2 x <span class="price f-800 cod__black-color">$ 78.00</span></span>
                                                </div>
                                                <div class="del-button">
                                                    <a href="#"><i class="icofont-close-line"></i></a>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="total-text d-flex justify-content-between">
                                                    <span class="f-800 cod__black-color">总价 </span>
                                                    <span class="f-800 cod__black-color">$ 99.00</span>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="d-flex justify-content-between">
                                                    <a href="#" class="checkout">核算</a>
                                                    <a href="#" class="viewcart">查看购物车</a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bottom header__bottom header__bottom--border header-bottom-three">
                <div class="container">
                    <div class="row">
                        <section class="hero hero__area hero-area-three">
                            <div class="hero__active">
                                <div class="container slider-active">
                                    <div class="single__hero single-slider hero__bg pt-190 pb-180" data-background="../img/bg/h3-hero-bg.jpg">
                                        <div class="row">
                                            <div class="col-lg-6 offset-lg-3">
                                                <div class="hero__caption text-center">
                                        <span class="offer--title__hero cod__black-color f-800" data-animation="fadeInDown"
                                              data-delay=".2s">季末销售</span>
                                                    <h2 class="product--name__hero cod__black-color f-200 mb-40" data-animation="fadeInUp"
                                                        data-delay=".5s">木制家具</h2>
                                                    <p class="product--price__hero cod__black-color mb-20" data-animation="fadeInLeft"
                                                       data-delay=".7s"><span class="f-300">价格</span><span
                                                            class="price f-800"><sup>$</sup>252.00</span><span class="f-300 ml-10"></span></p>
                                                    <a href="#" class="btn orange-bg-btn f-700" data-animation="fadeInDown"
                                                       data-delay=".9s">开始购买</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="single__hero single-slider hero__bg pt-190 pb-180" data-background="../img/bg/h3-hero-bg.jpg">
                                        <div class="row">
                                            <div class="col-lg-6 offset-lg-3">
                                                <div class="hero__caption text-center">
                                        <span class="offer--title__hero cod__black-color f-800" data-animation="fadeInDown"
                                              data-delay=".2s">季末销售</span>
                                                    <h2 class="product--name__hero cod__black-color f-200 mb-40" data-animation="fadeInUp"
                                                        data-delay=".5s">木制家具</h2>
                                                    <p class="product--price__hero cod__black-color mb-20" data-animation="fadeInLeft"
                                                       data-delay=".7s"><span class="f-300">价格</span><span
                                                            class="price f-800"><sup>$</sup>252.00</span><span class="f-300 ml-10">只有</span></p>
                                                    <a href="#" class="btn orange-bg-btn f-700" data-animation="fadeInDown"
                                                       data-delay=".9s">开始购买</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="single__hero single-slider hero__bg pt-190 pb-180" data-background="../img/bg/h3-hero-bg.jpg">
                                        <div class="row">
                                            <div class="col-lg-6 offset-lg-3">
                                                <div class="hero__caption text-center">
                                        <span class="offer--title__hero cod__black-color f-800" data-animation="fadeInDown"
                                              data-delay=".2s">季末销售</span>
                                                    <h2 class="product--name__hero cod__black-color f-200 mb-40" data-animation="fadeInUp"
                                                        data-delay=".5s">木制家具</h2>
                                                    <p class="product--price__hero cod__black-color mb-20" data-animation="fadeInLeft"
                                                       data-delay=".7s"><span class="f-300">价格</span><span
                                                            class="price f-800"><sup>$</sup>252.00</span><span class="f-300 ml-10">只有</span></p>
                                                    <a href="#" class="btn orange-bg-btn f-700" data-animation="fadeInDown"
                                                       data-delay=".9s">开始购买</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="single__hero single-slider hero__bg pt-190 pb-180" data-background="../img/bg/h3-hero-bg.jpg">
                                        <div class="row">
                                            <div class="col-lg-6 offset-lg-3">
                                                <div class="hero__caption text-center">
                                        <span class="offer--title__hero cod__black-color f-800" data-animation="fadeInDown"
                                              data-delay=".2s">季末销售</span>
                                                    <h2 class="product--name__hero cod__black-color f-200 mb-40" data-animation="fadeInUp"
                                                        data-delay=".5s">木制家具</h2>
                                                    <p class="product--price__hero cod__black-color mb-20" data-animation="fadeInLeft"
                                                       data-delay=".7s"><span class="f-300">价格</span><span
                                                            class="price f-800"><sup>$</sup>252.00</span><span class="f-300 ml-10"></span></p>
                                                    <a href="#" class="btn orange-bg-btn f-700" data-animation="fadeInDown"
                                                       data-delay=".9s">开始购买</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </section>
                    </div>
                </div>
            </div>
        </header>
        <!-- Header end /-->

    <!-- Main -->
    <main class="main--wrapper">

        <!-- shop area start -->
        <div class="product shop-page pt-80 pb-80 fix">
            <div class="container">
                <div class="border-b">
                    <div class="row">
                        <div class="col-lg-5 col-md-4">
                            <div class="shop-bar d-flex align-items-center">
                                <h4 class="f-800 cod__black-color">Shop</h4>
                                <nav aria-label="breadcrumb">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="/">首页</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">博客</li>
                                    </ol>
                                </nav>
                            </div>
                        </div>
                        <div class="col-lg-7 col-md-8">
                            <div class="bar-wrapper">
                                <div class="select-text">
                                    <span>共有 ${pageInfo.total}个结果</span>
                                </div>
                                <div class="shop-select">
                                    <select id="select_type" onchange="search_by_type(this)" name="select" id="shop-select-one">
                                        <option value="-1">请选择类别</option>
                                        <c:forEach items="${productTypes}" var="t">
                                        <option <c:if test="${typeId==t.id}">selected</c:if>  value="${t.id}">${t.productType}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-30">
                    <div class="col-sm-12">
                        <div class="product__active owl-carousel">
                            <c:forEach items="${pageInfo.list}" begin="0" end="4" var="p" >
                            <div class="product__single">
                                <div class="product__box">
                                    <div class="product__thumb">
                                        <a href="product-details.jsp" class="img-wrapper">
                                            <img class="img" src="../img/allproducts/${p.productImg}" alt="">
                                            <img class="img secondary-img" src="../img/allproducts/${p.productImg}" alt="">
                                        </a>
                                    </div>
                                    <div class="product__content--top">
                                        <span class="cate-name">${p.name}</span>
                                        <h6 class="product__title mine__shaft-color f-700 mb-0"><a href="product-details.jsp">${p.remark}</a></h6>
                                    </div>
                                    <div class="product__content--rating d-flex justify-content-between">
                                        <div class="rating">
                                            <ul class="list-inline">
                                                <li class="rating-active"><i class="fas fa-star"></i></li>
                                                <li class="rating-active"><i class="fas fa-star"></i></li>
                                                <li class="rating-active"><i class="fas fa-star"></i></li>
                                                <li><i class="fas fa-star"></i></li>
                                                <li><i class="fas fa-star"></i></li>
                                            </ul>
                                        </div>
                                        <div class="price">
                                            <h5 class="grenadier-color f-600">${p.price}</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#"><span class="lnr lnr-heart"></span></a>
                                    <a href="#"><span class="lnr lnr-eye" onclick="product_details(${p.id})"></span></a>
                                    <a href="#"><span class="lnr lnr-cart"></span></a>
                                    <a href="#"><span class="lnr lnr-sync"></span></a>
                                </div>
                            </div>
                            </c:forEach>
                        </div>

                        <div class="product__active owl-carousel">
                            <c:forEach items="${pageInfo.list}" begin="5" end="9" var="p" >
                            <div class="product__single">
                                <div class="product__box">
                                    <div class="product__thumb">
                                        <a href="product-details.jsp" class="img-wrapper">
                                            <img class="img" src="../img/allproducts/${p.productImg}" alt="">
                                            <img class="img secondary-img" src="../img/allproducts/${p.productImg}" alt="">
                                        </a>
                                    </div>
                                    <div class="product__content--top">
                                        <span class="cate-name">${p.name}</span>
                                        <h6 class="product__title mine__shaft-color f-700 mb-0"><a href="product-details.jsp">${p.remark}</a></h6>
                                    </div>
                                    <div class="product__content--rating d-flex justify-content-between">
                                        <div class="rating">
                                            <ul class="list-inline">
                                                <li class="rating-active"><i class="fas fa-star"></i></li>
                                                <li class="rating-active"><i class="fas fa-star"></i></li>
                                                <li class="rating-active"><i class="fas fa-star"></i></li>
                                                <li><i class="fas fa-star"></i></li>
                                                <li><i class="fas fa-star"></i></li>
                                            </ul>
                                        </div>
                                        <div class="price">
                                            <h5 class="grenadier-color f-600">$${p.price}</h5>
                                        </div>
                                    </div>
                                </div>
                                <div class="product-action">
                                    <a href="#"><span class="lnr lnr-heart"></span></a>
                                    <a href="#"><span class="lnr lnr-eye" onclick="product_details(${p.id})"></span></a>
                                    <a href="#"><span class="lnr lnr-cart"></span></a>
                                    <a href="#"><span class="lnr lnr-sync"></span></a>
                                </div>
                            </div>
                            </c:forEach>
                        </div>
                    </div>
                </div>
                <div class="row mt-20">
                    <div class="col-sm-12">
                        <div class="common-pagination">
                            <nav aria-label="Page navigation example">
                                <ul class="pagination">

                                    <c:if test="${pageInfo.pageNum>1}">
                                        <li class="page-item"><a class="page-link" href="javascript:nextPage(${pageInfo.pageNum-1})"><i class="fas fa-angle-left"></i> Prev</a></li>
                                    </c:if>

                                    <c:if test="${pageInfo.pageNum<=1}">
                                        <li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-left"></i> Prev</a></li>
                                    </c:if>

                                    <c:set var="start" value="${pageInfo.pageNum}"></c:set>

                                    <c:if test="${pageInfo.pageNum+2<=pageInfo.pages}">
                                        <c:set var="end" value="${pageInfo.pageNum+2}"></c:set>
                                    </c:if>

                                    <c:if test="${pageInfo.pageNum+2>pageInfo.pages}">
                                        <c:set var="start" value="${pageInfo.pages-2}"></c:set>
                                        <c:set var="end" value="${pageInfo.pages}"></c:set>
                                    </c:if>

                                    <c:forEach begin="${start<=0?1:start}" end="${end}" var="n">

                                        <c:if test="${pageInfo.pageNum==n}">
                                            <li class="page-item"><a class="page-link" style="background-color: orangered" href="javascript:nextPage(${n})">${n}</a></li>
                                        </c:if>
                                        <c:if test="${pageInfo.pageNum!=n}">
                                            <li class="page-item"><a class="page-link" href="javascript:nextPage(${n})">${n}</a></li>
                                        </c:if>

                                    </c:forEach>

                                    <c:if test="${pageInfo.pageNum<pageInfo.pages}">
                                        <li class="page-item"><a class="page-link" href="javascript:nextPage(${pageInfo.pageNum+1})">Next <i class="fas fa-angle-right"></i></a></li>
                                    </c:if>

                                    <c:if test="${pageInfo.pageNum>=pageInfo.pages}">
                                        <li class="page-item"><a class="page-link" href="#">Next <i class="fas fa-angle-right"></i></a></li>
                                    </c:if>




                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- shop area end -->

        <%@include file="../WEB-INF/footer.jsp"%>



        <script>
            function nextPage(pageNow) {
                let value = document.getElementById("searchName").value;
                let select_type = document.getElementById("select_type");
                let typeId="-1"
                if(select_type!=null){
                    typeId = select_type.value;
                }
                window.location="/product/shop?pageNow="+pageNow+"&searchName="+value+"&typeId="+typeId;
            }
            
            function search_product() {
                let searchName = document.getElementById("searchName").value;
                window.location="/product/shop?searchName="+searchName;
            }

            function search_by_type(obj){
                let searchName = document.getElementById("searchName").value;
                window.location="/product/shop?searchName="+searchName+"&typeId="+obj.value;
            }

            function product_details(pId) {
                window.location="/product/details?pId="+pId;
            }
        </script>



    <!-- JS here -->
    <script src="../js/vendor/modernizr-3.5.0.min.js"></script>
    <script src="../js/vendor/jquery-1.12.4.min.js"></script>
    <script src="../js/popper.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/owl.carousel.min.js"></script>
    <script src="../js/isotope.pkgd.min.js"></script>
    <script src="../js/one-page-nav-min.js"></script>
    <script src="../js/slick.min.js"></script>
    <script src="../js/ajax-form.js"></script>
    <script src="../js/wow.min.js"></script>
    <script src="../js/jquery.scrollUp.min.js"></script>
    <script src="../js/imagesloaded.pkgd.min.js"></script>
    <script src="../js/jquery.nice-select.min.js"></script>
    <script src="../js/jquery.magnific-popup.min.js"></script>
    <script src="../js/jquery.countdown.min.js"></script>
    <script src="../js/jquery-ui-slider-range.js"></script>
    <script src="../js/meanmenu.min.js"></script>
    <script src="../js/Elemental.js"></script>
    <script src="../js/plugins.js"></script>
    <script src="../js/main.js"></script>
</body>

</html>
